import React, { useEffect, useState } from 'react';
import {
    Button,
    DatePicker,
    Form,
    Input,
    Select,
} from 'antd';
const { RangePicker } = DatePicker;
import './style.less'
import { getFlowDataSources } from '@/api';
import { useModelStore } from '@/store/MetaModel';

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 6,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 14,
        },
    },
};
const StarterForm = ({ onFinish }) => {
    const [form] = Form.useForm();
    const [dataSources, setDataSources] = useState([])
    const values = Form.useWatch([], form);
    const [submittable, setSubmittable] = useState(false);

    React.useEffect(() => {
        form.validateFields({ validateOnly: true })
            .then(() => setSubmittable(true))
            .catch(() => setSubmittable(false));
    }, [values]);

    const { idSpace, vluTabSource, vluModelType, vluModelName, updateFormValues } = useModelStore()
    const initalValues = {
        vluModelName,
        vluTabSource,
        vluModelType
    }
    const options = [
        {
            label: 'lowcode',
            value: 'lowcode'
        }
    ]

    useEffect(() => {
        getFlowDataSources().then(res => {
            const opts = res?.data?.map(d => {
                return {
                    label: d.title,
                    value: d.title
                }
            }) ?? []
            setDataSources(opts)
        })
    }, [])

    const handleSubmit = (value) => {
        const data = {
            ...value,
            timeCreated: new Date().toISOString(),
            timeUpdated: new Date().toISOString(),
            userCreated: 'test'
        }
        updateFormValues({ ...data })
        onFinish?.(data)
    }

    return (
        <div style={{ width: 'calc(100% - 40px)' }} className='canvas-form'>
            <Form
                {...formItemLayout}
                form={form}
                name='starter'
                layout='vertical'
                initialValues={initalValues}
                style={{
                    width: '100%',
                    overflowY: 'auto',
                    overflowX: 'hidden'
                }}
                onFinish={handleSubmit}
            >
                <Form.Item
                    label="名称"
                    name="vluModelName"
                    required={false}
                    rules={[
                        {
                            required: true,
                            message: '该项为必填项',
                        },
                    ]}
                >
                    <Input placeholder='请输入模型名称' />
                </Form.Item>

                <Form.Item
                    label="类型"
                    name="vluModelType"
                    rules={[
                        {
                            message: '请选择类型',
                        },
                    ]}
                >
                    <Select options={options} allowClear showSearch disabled />
                </Form.Item>

                <Form.Item
                    label="数据来源"
                    name="vluTabSource"
                    rules={[
                        {
                            validator(rule, value) {
                                if (!value) return Promise.reject('请选择数据来源！')
                                return Promise.resolve()
                            }
                        },
                    ]}
                >
                    <Select options={dataSources} allowClear showSearch />
                </Form.Item>

                <Form.Item
                    label="描述"
                    name="txtDescription"
                    rules={[
                        {
                            max: 200,
                            message: '描述不能超过200字符',
                        },
                    ]}
                >
                    <Input.TextArea rows={5} placeholder='简要描述模型的功能，选填' autoSize={{ minRows: 5, maxRows: 5 }} />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 18,
                        span: 16,
                    }}
                >
                    {

                    }
                    <Button type="primary" htmlType="submit" size='large' style={{ marginTop: 30, fontSize: 14 }} disabled={!submittable}>
                        确定并继续
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default StarterForm;